<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.name" placeholder="name" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.uid" placeholder="uid" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.accountId" placeholder="accountId" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.superAccount" placeholder="superAccount" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        Search
      </el-button>
      <el-button :loading="downloadLoading" class="pan-btn pink-btn" type="primary" icon="el-icon-document" @click="handleDownload">
        Export Excel
      </el-button>
      <el-tag>在线人数：{{ onlineNum }}</el-tag>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label="ID" width="50">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="昵称" width="150" align="center">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="UID" align="center">
        <template slot-scope="scope">{{ scope.row._uid }}</template>
      </el-table-column>
      <el-table-column label="AccountId" align="center">
        <template slot-scope="scope">{{ scope.row.accountId }}</template>
      </el-table-column>
      <el-table-column label="超级账号" align="center">
        <template slot-scope="scope">{{ scope.row.superAccount | formatStatus }}</template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button v-if="row.superAccount==1" size="mini" type="success" @click="handleModifyStatus(row,0)">
            Publish
          </el-button>
          <el-button v-if="row.superAccount!=1" size="mini" @click="handleModifyStatus(row,1)">
            Draft
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageNum" @pagination="fetchData" />
  </div>
</template>

<script>
import { formatDate } from '@/utils/date'
import { parseTime } from '@/utils'
import { getList, getOnlineNum, setWhite } from '@/api/gameuser'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui

export default {
  components: { Pagination },
  directives: { elDragDialog, waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    formatDate(time) {
      var date = new Date(time * 1000)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    formatStatus(number) {
      if (number === 1) {
        return '是'
      }
      return '否'
    }
  },
  data() {
    return {
      closureVisible: true,
      payMode: 1,
      value1: '1',
      csData: [
        {
          name: '一',
          on: '0'
        },
        {
          name: '二',
          on: '1'
        }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      onlineNum: 0, // 在线人数
      list: null,
      listLoading: true,
      downloadLoading: false,
      total: 0,
      listQuery: {
        page: 1,
        pageNum: 20,
        name: '',
        accountId: '',
        uid: '',
        superAccount: ''
      },
      sendMail: {
        uid: '',
        name: '',
        accountId: '',
        title: '',
        content: '',
        res: ''
      },
      closurePlayer: {
        uid: '',
        name: '',
        accountId: '',
        closureStartTime: '',
        closureEndTime: '',
        closureLength: 0,
        payMode: true
      },
      dialogFormVisible: false,
      dialogFormVisibleClosure: false,
      rules: {
        title: [
          { required: true, message: '请输入邮件标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入邮件内容', trigger: 'blur' }
        ]
      },
      // dialogTableVisible: false,
      options: [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' },
        { value: '选项3', label: '蚵仔煎' },
        { value: '选项4', label: '龙须面' }
      ],
      value: '',
      gridData: [{
        date: '2016-05-02',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District'
      }, {
        date: '2016-05-04',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District'
      }, {
        date: '2016-05-01',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District'
      }, {
        date: '2016-05-03',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District'
      }]
    }
  },
  created() {
    this.fetchData()
    // 两分钟更新一次在线人数
    // setInterval(this.handleOnlineNum, 1000 * 120)
    this.handleOnlineNum()
    this.initData({})
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.total = response.data.num
        this.list = response.data.list
        this.listLoading = false
      })
    },
    async initData(data) {
      // 获取当前时间
      this.closurePlayer.closureEndTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
    },
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    handleOnlineNum() {
      getOnlineNum().then(response => {
        this.onlineNum = response.data.onlineNum
      })
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['昵称', 'UID', '工会', '状态', '登录时间', '星星', '钻石', '金币', '体力']
        const filterVal = ['name', '_uid', 'unionId', 'offlineTime', 'lastLoginTime', 'starSum', 'diamon', 'gold', 'energy']
        const list = this.list
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'offlineTime') {
          if (v[j] === 0) {
            return '在线'
          } else {
            return '离线时间：' + parseTime(v[j])
          }
        } else if (j === 'lastLoginTime') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    handleView(row) {

    },
    handleSendMails(row) {
      this.sendMail.uid = row._uid
      this.sendMail.name = row.name
      this.sendMail.accountId = row.accountId
      this.dialogFormVisible = true
    },
    handleClosure(row) {
      this.closurePlayer.uid = row._uid
      this.closurePlayer.name = row.name
      this.closurePlayer.accountId = row.accountId
      // var date = new Date(row.closureEndTime * 1000)
      // this.closurePlayer.closureEndTime = formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      if (row.closureEndTime > 0) {
        this.closurePlayer.payMode = 1 // 封禁
        this.closureVisible = true // 显示封禁时间
      } else {
        this.closurePlayer.payMode = 2 // 解封
        this.closureVisible = false // 隐藏封禁时间
      }
      this.closurePlayer.closureEndTime = new Date(row.closureEndTime * 1000)
      this.dialogFormVisibleClosure = true
    },
    clearMails() {
      this.sendMail.uid = ''
      this.sendMail.title = ''
      this.sendMail.content = ''
      this.sendMail.res = ''
    },
    // v-el-drag-dialog onDrag callback function
    handleDrag() {
      // this.$refs.select.blur()
    },
    // 切换主题
    changeUnseal(val) {
      if (val === 1) {
        this.closureVisible = true
      } else {
        this.closureVisible = false
      }
    },
    handleModifyStatus(row, status) {
      var obj = {
        _uid: row._uid,
        superAccount: status
      }
      setWhite(obj).then(response => {
        var msg = response.data.msg
        if (msg === 'suc') {
          this.$message({
            message: '操作Success',
            type: 'success'
          })
          row.superAccount = status
        } else {
          this.$message({
            message: '操作error',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>
